<div
#anchorRef
(mousedown)="handleMousedown( $event )"
(touchstart)="handleMousedown($event)"
(click)="handleClick($event)"
[style.left.px]="LogicTextField.options.X "
[style.top.px]="LogicTextField.options.Y" 
>
    <textarea [class.bold]="LogicTextField.options.isBold" [class.italic]="LogicTextField.options.isItalic" 
    [style.font-size]="LogicTextField.options.fontSize + 'px'" spellcheck="false" 
    [(ngModel)]="LogicTextField.options.title" maxlength="250" #field class="img-container"
    [style.width]="LogicTextField.options.width+'px'" [style.height]="LogicTextField.options.height+'px'"
    [style.backgroundColor]="LogicTextField.options.backgroundColor" [style.color]="LogicTextField.options.color" 
    (resize)="resize($event)"></textarea>
</div>
<div style="display:none">
    <div #options>
        <div>
            <span class="property-name">Font Size:</span>
            <div class="text-format-container">
                <mat-form-field appearance="fill" class="endpoint-url">
                    <mat-select (selectionChange)="afterChange()" [(ngModel)]="LogicTextField.options.fontSize">
                        <mat-option [value]="8">8px</mat-option>
                        <mat-option [value]="10">10px</mat-option>
                        <mat-option [value]="12">12px</mat-option>
                        <mat-option [value]="14">14px</mat-option>
                        <mat-option [value]="16">16px</mat-option>
                        <mat-option [value]="18">18px</mat-option>
                        <mat-option [value]="20">20px</mat-option>
                    </mat-select>
                    <ng-template #emptyEndpoint>
                        <mat-select value="/" disabled>
                            <mat-option value="/">/</mat-option>
                        </mat-select>
                    </ng-template>
                </mat-form-field>
                <span (click)="toggleBold(); afterChange()" [class.inactive]="!LogicTextField.options.isBold" [class.active]="LogicTextField.options.isBold" class="options-button-icon">
                    <i class="fas fa-bold"></i>
                </span>
                <span (click)="toggleItalic(); afterChange()" [class.inactive]="!LogicTextField.options.isItalic" [class.active]="LogicTextField.options.isItalic" class="options-button-icon">
                    <i class="fas fa-italic"></i>
                </span>
            </div>
            <span class="property-name">Color:</span>
            <div class="text-format-contianer">
                <input [value]="LogicTextField.options.color"
                    [cpPosition]="'top-right'"
                    [(colorPicker)]="LogicTextField.options.color"
                    [cpPosition]="'top'"/>
      
            </div>
            <span class="property-name">Background color:</span>
            <div class="text-format-contianer">
                <input [value]="LogicTextField.options.backgroundColor"
                    [cpPosition]="'top-right'"
                    [(colorPicker)]="LogicTextField.options.backgroundColor"
                    [cpPosition]="'top'"/>
      
            </div>
        </div>
    </div>
</div>